<template>
  <el-dialog
    top="30px"
    width="600px"
    class="dialog-sm"
    append-to-body
    title="保费登记详情"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <div class="row mb-3">
        <div class="col">
          <span>提交金额：</span>
          <span>{{ register.actual_warrant_fee }}万元</span>
        </div>
        <div class="col">
          <span>提交时间：</span>
          <span>{{ register.actual_warrant_date }}</span>
        </div>
      </div>
      <div class="d-flex mb-3">
        <span>附件信息：</span>
        <div class="flex-1">
          <img-card :images="attachs"></img-card>
        </div>
      </div>

      <hr />

      <div v-if="hasFinish">
        <div class="mb-3">
          <span>到账金额：</span>
          <span>{{ register.confirm_warrant_fee }}万元</span>
        </div>
        <div>
          <span>到账时间：</span>
          <span>{{ register.confirm_fee_time }}</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { arrayFromString } from '@vimi/utils-tool'
import { formatToDay } from '@/common/plugins/tools/date'
import { PayStatus } from '@/bigcredit/views/settle/collect/model'

import ImgCard from '@/components/ImgCard'

export default {
  components: {
    ImgCard,
  },
  props: {
    visible: Boolean,
    registerId: String,
  },
  data() {
    return {
      tableName: 'credit_warrant_fee_register',
      loading: false,
      register: {},
      attachs: [],
    }
  },
  computed: {
    ...mapGetters(['user']),
    hasFinish() {
      return +this.register.pay_status === PayStatus.Finished
    },
  },
  watch: {
    visible(val) {
      val && this.getData()
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.registerId) return

      this.reset()
      this.loading = true
      this.$api
        .getData({
          table: this.tableName,
          params: {
            'id.eq': this.registerId,
          },
        })
        .then(res => {
          this.register = (res.data || [])[0] || {}
          this.register.actual_warrant_date = formatToDay(this.register.actual_warrant_date)
          this.register.confirm_fee_time = formatToDay(this.register.confirm_fee_time)
          this.attachs = arrayFromString(this.register.attachment)
        })
        .catch(err => {
          this.$message.error('获取信息失败！')
          throw err
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.register = {}
      this.attachs = []
    },
  },
}
</script>
<style lang="scss" scoped></style>
